// Sidebar left.
.td-sidebar {
	padding-bottom: 20px;
	@media (min-width: 768px) {
		padding-top: 9rem;
	}
	.td-sidebar__inner {
		@media (min-width: 1200px) {
			top: 9rem;
		}
	}

	// Navigation in Left-sidebar.
	.td-sidebar-nav {
		@media (min-width: 768px) {
			@supports ((position: -webkit-sticky) or (position: sticky)) {
				// shadow overflow.
				background: linear-gradient(#f4f4f4 33%, rgba(255, 255, 255, 0)),
					linear-gradient(rgba(255, 255, 255, 0), #f4f4f4 66%) 0 100%,
					radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
					radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 0 100%;
				background-color: #f4f4f4;
				background-repeat: no-repeat;
				background-attachment: local, local, scroll, scroll;
				background-size: 100% 57px, 100% 57px, 100% 19px, 100% 19px;
				max-height: calc(100vh - 12.5rem);
			}
		}
		@media (min-width: 1024px) {
			@supports ((position: -webkit-sticky) or (position: sticky)) {
				max-height: calc(100vh - 14rem);
			}
		}

		> .td-sidebar-nav__section {
			padding-left: 1.5rem;

			ul {
				padding-left: 0.5rem !important;
			}
		}
		.td-sidebar-nav__section-title {
			margin-bottom: 5px;
			> ul {
				margin-top: 5px;

				.td-sidebar-nav__section-title.with-child {
					> a {
						position: relative;
						display: flex;
						justify-content: space-between;
						padding-right: 20px;
						&::after {
							display: inline-flex;
							content: '\f078';
							font-family: 'Font Awesome 5 Free';
						}
					}
					&.active-path {
						> a {
							&::after {
								transform: rotate(180deg);
							}
						}
					}
					ul.foldable {
						margin-left: 10px;
					}
				}
			}
			// Same name but this is a child of the same.
			.td-sidebar-nav__section-title {
				margin-right: 15px;
				@media (min-width: 768px) {
					margin-right: 0;
				}
			}
			.td-sidebar-link {
				// Style.
				font-weight: 700;
				font-size: 16px;
				line-height: 150%;
				letter-spacing: 0.02em;
				color: $black;
				// Spacing.
				display: flex;
				padding-top: 8px;
				padding-bottom: 8px;
				border-radius: 5px;
				border-left: 4px solid transparent;
				filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0));
				span {
					padding-left: 10px;
					padding-right: 20px;
				}
				&:hover {
					color: $link-color;
				}
				&.active {
					background-color: #eee;
					filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.05));
				}
				@media (min-width: 768px) {
					&.active {
						background-color: #f8f8f8;
					}	
				}

			}
		}
	}
}
